<link rel="import" href="packages/spark_widgets/common/spark_widget.html">
<link rel="import" href="packages/spark_widgets/spark_button/spark_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_button/spark_menu_button.html">
<link rel="import" href="packages/spark_widgets/spark_menu_item/spark_menu_item.html">
<link rel="import" href="packages/spark_widgets/spark_menu_separator/spark_menu_separator.html">
<link rel="import" href="packages/spark_widgets/spark_toolbar/spark_toolbar.html">

<polymer-element name="example-ui">
  <template>
    <link rel="stylesheet" href="../common/example_ui.css">

    <spark-toolbar class="toolbar"
        horizontal
        justify="spaced"
        spacing="small">
      <input type="fileFilter"
          id="fileFilter"
          placeholder="Filter"
          on-keydown="{{fileFilterKeydownHandler}}"
          on-input="{{fileFilterInputHandler}}"
          tabindex="0"/>

      <spark-button id="runButton" flat round padding="medium">
        <svg viewBox="0 0 24 24">
          <polygon points="8,5 8,19 19,12 "></polygon>
        </svg>
      </spark-button>

      <spark-menu-button
          id="mainMenu"
          valueAttr="action-id"
          arrow="none"
          on-activate="{{onMenuSelected}}">

        <spark-button menuButton flat round padding="medium">
          <svg viewBox="0 0 24 24">
            <path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"></path>
          </svg>
        </spark-button>

        <spark-menu-item label="New Project...">
        </spark-menu-item>

        <spark-menu-separator></spark-menu-separator>

        <spark-menu-item label="Open File...">
        </spark-menu-item>
        <spark-menu-item label="Add Folder to Workspace...">
        </spark-menu-item>
        <spark-menu-item label="Git Clone...">
        </spark-menu-item>

        <spark-menu-separator></spark-menu-separator>

        <spark-menu-item label="Run">
        </spark-menu-item>
        <spark-menu-item label="Deploy to Mobile...">
        </spark-menu-item>
        <spark-menu-item label="Publish to Chrome Web Store...">
        </spark-menu-item>

        <template if="{{developerMode}}">
          <spark-menu-separator></spark-menu-separator>
          <spark-menu-item label="Run Tests">
          </spark-menu-item>
        </template>

        <spark-menu-separator></spark-menu-separator>

        <spark-menu-item label="Settings...">
        </spark-menu-item>
        <spark-menu-item label="Send Feedback...">
        </spark-menu-item>
        <spark-menu-item label="About Spark">
        </spark-menu-item>

      </spark-menu-button>

      <spark-button id="leftNav" flat round padding="medium">
        <svg viewBox="0 0 24 24">
          <path d="M20,11H7.8l5.6-5.6L12,4l-8,8l8,8l1.4-1.4L7.8,13H20V11z"></path>
        </svg>
      </spark-button>
      <spark-button id="rightNav" flat round padding="medium">
        <svg viewBox="0 0 24 24">
          <polygon points="12,4 10.6,5.4 16.2,11 4,11 4,13 16.2,13 10.6,18.6 12,20 20,12 "></polygon>
        </svg>
      </spark-button>
    </spark-toolbar>
  </template>

  <script type="application/dart" src="example_ui.dart"></script>
</polymer-element>
